var PersonEleStatistic = function () {
  var template = /*html*/ `
    <div class="person-ele-statistic" v-loading.fullscreen.lock="loading">
      <div>
        <el-form :model="search" label-width="80px" :inline="true" size="medium">
          <el-form-item label="住宿日期">
            <el-date-picker v-model="search.startTime" format="yyyy-MM-dd" value-format="timestamp" :editable="false" style="width:160px;"
              :picker-options="startPickerOptions"></el-date-picker>
            -
            <el-date-picker v-model="search.endTime" format="yyyy-MM-dd" value-format="timestamp" :editable="false" style="width:160px;"
              :picker-options="endPickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <el-button type="primary" @click="exportExcel">导出excel</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-bottom:5px">
        <el-input style="width:300px" v-model="searchPersonName" size="medium" placeholder="输入用户名搜索" @input="filterStatData"></el-input>
      </div>
      <div class="person-ele--statistic-content">
        <el-table class="personEleStatTable" fit border stripe :data="eleStatData" ref="personEleStatTable" height="parent">
          <el-table-column :resizable="false" prop="userName" label="姓名"></el-table-column>
          <el-table-column :resizable="false" prop="perEnergyFee" label="用电量"></el-table-column>
          <el-table-column :resizable="false" prop="perWaterFee" label="用水量"></el-table-column>
          <el-table-column :resizable="false" prop="electricFee" label="电费(元)"></el-table-column>
          <el-table-column :resizable="false" prop="waterFee" label="水费(元)"></el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    data: function () {
      var self = this;
      return {
        loading: false,
        statData: [],
        searchPersonName: "",
        eleStatData: [],
        timeout: null,
        search: {
          startTime: moment().startOf('month').valueOf(),
          endTime: moment().valueOf()
        },
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        }
      };
    },
    created: function () {
      this.setStatData();
    },
    methods: {
      setStatData: function () {
        var postData = {};
        this.setStatPostData(postData);

        this.loading = true;
        var self = this;
        ajaxRequest('dormManage/getPersonOfDormStatistics', postData).then(function (dorms) {
          self.loading = false;
          var statData = [];
          for (var i = 0; i < dorms.length; i++) {
            var dorm = dorms[i];
            statData.push({
              userName: dorm.username,
              perEnergyFee: _.round(dorm.useTotalOfElectricity, 4),
              perWaterFee: _.round(dorm.useTotalOfWater, 4),
              electricFee: _.round(dorm.electricFee, 2),
              waterFee: _.round(dorm.waterFee, 2)
            });
          }
          self.statData = statData;
          self.filterStatData();
        }).catch(function () {
          self.loading = false;
        });
      },

      searchData: function () {
        this.setStatData();
      },

      filterStatData: function () {
        var timeout = this.timeout;
        if (timeout !== null) {
          clearTimeout(timeout);
        }

        var self = this;
        this.timeout = setTimeout(function () {
          self.toFilterStatData();
          self.timeout = null;
        }, 300);
      },

      toFilterStatData: function () {
        var searchPersonName = this.searchPersonName;
        var statData = this.statData;
        if (searchPersonName !== '') {
          searchPersonName = searchPersonName.toLowerCase();
          statData = _.filter(statData, function (obj) {
            var userName = obj.userName;
            userName = userName.toLowerCase();
            return userName.indexOf(searchPersonName) !== -1;
          });
        }
        this.eleStatData = statData;
      },

      getPerFee: function (totalFee, totalWorkDate, workDate) {
        if (totalFee === 0 || totalWorkDate === 0) {
          return 0;
        }

        var perFee = _.round(totalFee / totalWorkDate * workDate, 2);
        return perFee;
      },

      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start') {
          var endTime = search.endTime;
          if (endTime === null) {
            return true;
          }
          return moment(time).isSameOrBefore(endTime, 'day');
        } else if (type === 'end') {
          var startTime = search.startTime;
          if (startTime === null) {
            return true;
          }
          return moment(time).isSameOrAfter(startTime, 'day');
        }
        return true;
      },

      setStatPostData: function (postData) {
        var search = this.search;
        var startTime = search.startTime;
        var endTime = search.endTime;
        if (startTime !== null) {
          postData.startTime = moment(startTime).startOf('day').valueOf();
        }
        if (endTime !== null) {
          postData.endTime = moment(endTime).endOf('day').valueOf();
        }
      },

      exportExcel: function () {
        var postData = {};
        this.setStatPostData(postData);
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/dormManage/downlodePersonOfDormStatistics?${formParam}`;
        window.open(path);
      }
    },
    template: template
  };
}();
